<template>
    <div class="echarts" ref="map">
        <div id="echarts"></div>
    </div>
</template>
<script>
import * as Echarts from 'echarts'
import { fontSize } from '@/utils/tools'
export default {
    data () {
      return {
        echartsData: [
            {value: 8, name: '博士', itemStyle: { color: '#FFC800' }},
            {value: 8, name: '硕士',  itemStyle: { color: '#FF5757' }},
            {value: 60, name: '本科',  itemStyle: { color: '#575BFF' }},
            {value: 5, name: '高中',  itemStyle: { color: '#61EA5E' }},
            {value: 4, name: '初中',  itemStyle: { color: '#2C2E9B' }},
            {value: 9, name: '小学',  itemStyle: { color: '#65666D' }},
            {value: 5, name: '学前',  itemStyle: { color: '#8A4B44' }},
            {value: 1, name: '未知',  itemStyle: { color: '#000000' }}
        ]          
      }
    },
    mounted(){
        this.getEcharts()
    },
        methods: {
                getEcharts(){
        let myChart = Echarts.init(document.getElementById("echarts"))
        myChart.setOption({
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '学历',
                type: 'pie',
                radius: ['25%', '55%'],
                center: ["50%", "40%"], 
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center',
                    fontSize:fontSize(40),
                    height:fontSize(20)
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: fontSize(30),
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: this.echartsData
            }
        ],
            legend: {
              icon: 'circle',
              show: true,
              bottom: fontSize(40),
              width:fontSize(447),
              itemGap: fontSize(30),
              height: fontSize(84),
              itemWidth: fontSize(6),
              itemHeight: fontSize(6),
            textStyle: {
               fontSize: fontSize(14)
            },
            formatter: (name) => {
                const sum = this.echartsData.reduce((curr, item) => {
                return (curr += Number(item.value))
                }, 0)
                const value = this.echartsData.find(
                (item) => item.name === name
                ).value
                return (
                name +' '+((value / sum) * 100).toFixed(2) + '%'
                )
            }
            },
        })
        }
    }
}
</script>
<style lang="less" scoped>
    .echarts{
        width: 343px;
        height: 300px;
        background-color: #fff;
        content: '';
        display: table;
        clear: both;
        #echarts {
            width: 570px;
            height: 358px;
        }
          .top-titile{
            font-size: 16px;
            color: #222E44;
            margin-left: 12px;
            margin-top: 12px;
            font-weight: bold;
        }
    }
</style>